<template>
  <el-dialog :visible.sync="showPointDialog" :before-close="check" title="查看优惠策略" width="67%">
    <el-card class="box-card">
      <div slot="header">
        <span class="bold">基本信息</span>
      </div>

      <el-row>
        <el-col :span="24">
          <div class="watch">策略名称：{{ name }}</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="watch">开始时间：{{ beginTime }}</div>
        </el-col>
        <el-col :span="12">
          <div class="watch">结束时间：{{ endTime }}</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="watch">策略描述：{{ description }}</div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card1">
      <div slot="header">
        <span class="bold">策略触发条件</span>
      </div>
      <el-row>
        <el-col :span="12">
          <div class="watch">选择触发条件：{{ triggeringConditions }}</div>
        </el-col>
        <el-col :span="12">
          <div class="watch">是否对自动续订扣费生效：{{ isGoon === '0' ? '是' : '否' }}</div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card2">
      <div slot="header">
        <span class="bold">策略优惠形式</span>
      </div>
      <el-row>
        <el-col :span="24">
          <div class="watch">优惠形式：{{ preferentialType }}</div>
        </el-col>
      </el-row>
      <el-row v-if="compared === '1'">
        <el-col :span="24">
          <div class="watch">折扣比例：{{ discountRatio }}</div>
        </el-col>
      </el-row>
      <el-row v-if="compared === '0'">
        <el-col :span="24">
          <div class="watch">折价金额：{{ discountAmount }}元</div>
        </el-col>
      </el-row>
    </el-card>

  </el-dialog>
</template>

<script>
import { getdetail } from '@/api/discounts.js'
export default {
  name: 'Watch',
  props: {
    watchDialog: {
      type: Boolean,
      default: false
    },
    watchId: {
      type: String,
      default: '0'
    },
    discountsShape: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showPointDialog: false, // 遮罩
      name: '', // 名字
      compared: '',
      beginTime: '', // 开始时间
      discountRatio: '',
      endTime: '', // 结束时间
      description: '', // 描述
      triggeringConditions: '', // 触发条件
      isGoon: 1, // 是否自动续订
      preferentialType: '', // 优惠形式
      discountAmount: '', // 优惠金额
      selected: []
    }
  },
  watch: {
    watchDialog(newVal) {
      this.showPointDialog = newVal
      if (newVal) {
        this.selected = this.discountsShape
        this.loadDetail(this.watchId)
      }
    }
  },
  methods: {
    // 回调父组件
    check() {
      this.showPointDialog = false
      this.$emit('closeWatch')
    },

    // 请求详情
    loadDetail(id) {
      getdetail({ id: id }).then(res => {
        const data = res.data
        this.name = data.name
        this.beginTime = data.beginTime
        this.endTime = data.endTime
        this.discountRatio = data.discountRatio
        this.description = data.description
        this.triggeringConditions = data.triggeringConditions
        this.isGoon = data.isGoon
        this.compared = data.preferentialType
        this.selected.forEach(item => {
          if (item.configKeyDown === data.preferentialType) {
            this.preferentialType = item.configValue
          }
        })
        this.discountAmount = data.discountAmount
      })
    }
  }
}
</script>

<style scoped>
.box-card{
  margin-top: -25px;
}
.box-card1{
  margin-top: 10px;
}
.box-card2{
  margin-top: 10px;
}
.watch{
  margin: 10px 0;
}
.bold{
  font-weight: bold;
}
.el-card__header{
  padding: 9px 20px !important;
}
</style>
